
<template>
    <div>
    
    <input id='tipinput' style="width: 80%; height: 30px" type="text" />
    
      <div id="container" ref="amap">
      </div>
      <div id="my-panel"></div>
    </div>
</template>

<script setup>
import { ref,onMounted,onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
let map=null;
const initMap = async () => {
  await AMapLoader.load({
    key: '90f8ed6a70d30e928e3f03d816ec52e5',
    version: '2.0',
  }).then((AMap) => {


      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
      

    })
    .catch((e) => {
      console.log(e);
    });
};

onMounted(() => {
  initMap();
});
onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 500px;
}
</style>